<template name="evaluate">
	<view>
		<view class="review_con" :class="eva_con">
			<view class="review_con_left">
				<view class="en" :class="user_img">
					<image :src="content.outPosterThumbUrl"></image>
				</view>
			</view>
			<view class="review_con_middle">
				<view class="userName">
					{{content.outPosterName}}
				</view>
				<view class="userCon" v-if="!replyIs">
					{{content.content}}
				</view>
				<view class="userCon_Reply" v-else>
					<text>回复</text>
					<text>{{content.outReplayUserName}}</text>:
					<view>{{content.content}}</view>
				</view>
				<view class="userDate">
					<text>{{timeRes}}</text>
					<text>回复</text>
				</view>
			</view>
			<view class="review_con_right">
				<template v-if="content.hasLike">
					<!-- @click="changeZan" -->
					<image src="../imgs/zan.png" mode=""></image>
				</template>
				<template v-else>
					<!-- @click="changeZan" -->
					<image src="../imgs/weiZan.png" mode=""></image>
				</template>
				<view class="likeNum" v-if="content.materialId>0">
					{{content.materialId}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "evaluate",
		data() {
			return {
				user_img: "",
				zanIS: false,
				zanNum: 0,
				replyIs: false,
				eva_con: "",
				content: Object, //评论的内容
				time: 0,
				timeRes: "",
				isMore:true
			};
		},
		props: { //定义属性 接收父组件传过来的数据

			// 动态数据
			// zanIS:false,//点赞变红
			// zanNum:0,//点赞数量
			tranreplyis: false, //是否为回复的

			// 动态class名
			tranevacon: String, //定义整体评论框大小 widthBig(一级评论) 和 widthSmall(二级评论)
			tranuserimg: String, //定义用户头像大小 big (一级评论) 和 small (二级评论)
			trancontent: Object, //定义评论内容
			// console.log("数据:",tranevacon);
		},
		// 生命周期 组件创建完成后被调用
		created() {
			this.replyIs = this.tranreplyis;
			this.eva_con = this.tranevacon;
			this.user_img = this.tranuserimg;
			this.content = this.trancontent;
			this.time = this.trancontent.createTime;

			console.log("组件接收到的内容:", this.content);

			// 时间的设置
			this.getDateDiff();
		},
		methods: {
			getDateDiff: function() {
				var minute = 1000 * 60;
				var hour = minute * 60;
				var day = hour * 24;
				var halfamonth = day * 15;
				var month = day * 30;
				var date = new Date();
				var now = new Date().getTime();
				var diffValue = now - this.time;
				var monthC = diffValue / month;
				var weekC = diffValue / (7 * day);
				var dayC = diffValue / day;
				var hourC = diffValue / hour;
				var minC = diffValue / minute;
				var result;
				if (monthC >= 1) {
					result =  parseInt(monthC) + "个月前";
				} else if (weekC >= 1) {
					result = parseInt(weekC) + "周前";
				} else if (dayC >= 1) {
					result =  parseInt(dayC) + "天前";
				} else if (hourC >= 1) {
					result = parseInt(hourC) + "个小时前";
				} else if (minC >= 1) {
					result =  parseInt(minC) + "分钟前";
				} else
					result = "刚刚发表";
				this.timeRes = result;
			},
			
			// changeZan: function() {
			// 	// this.zanIS=!this.zanIS;
			// 	if (!this.zanIS) {
			// 		this.zanNum++;
			// 		this.zanIS = true;
			// 	} else if (this.zanIS && this.zanNum > 0) {
			// 		this.zanNum--;
			// 		this.zanIS = false;
			// 	}
			// }
		}

	}
</script>

<style>
	/* 评论内容 */

	.review_con {
		margin-top: 20px;
		min-height: 60px;
		display: flex;
		justify-content: space-between;
	}

	.review_con_left {
		width: 40px;
	}

	.review_con_left view {

		border-radius: 60%;
		justify-content: center;
		overflow: hidden;
	}

	.review_con_left view image {
		height: 100%;
		width: 100%;
	}

	.review_con_middle {

		color: white;
		width: 70%;
	}

	.review_con_middle .userName {
		color: #959696;
		font-size: 14px;
	}

	.review_con_middle .userCon {
		margin-top: 5px;
		font-size: 15px;
	}

	.review_con_middle .userDate {
		margin-top: 5px;
		color: #959696;
		font-size: 14px;
	}

	.review_con_middle .userDate text:nth-child(2) {
		margin-left: 10px;
	}

	.review_con_right {
		text-align: center;
		width: 10%;
	}

	.review_con_right image {
		height: 25px;
		width: 25px;
	}

	.review_con_right .likeNum {
		color: #959696;
		font-size: 15px;
	}


	/* 评论 回复 */
	.rev_con_reply {
		width: 90%;
		margin-left: 10%;
	}
	
	.userCon_Reply{
		min-height: 30px;
		font-size: 15px;
	}

	.userCon_Reply text:nth-child(2) {
		margin-left: 5px;
		color: #6A7998;
		margin-right: 2.5px;
	}

	.userCon_Reply view{
		width: 100%;
		min-height: 15px;
		line-height: 15px;
		word-break:break-all;
	}


	.big {
		height: 40px;
		width: 40px;
	}

	.small {
		height: 35px;
		width: 35px;
	}

	.widthBig {
		width: 100%;

	}

	.widthSmall {
		width: 90%;
		margin-left: 10%;
	}


	
</style>
